<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="xsl">
        <script src="jquery-3.1.1.js"></script>
        <title>置顶效果</title>
        <style>
           div{
               height: 2000px;
           }
            img{
                position: fixed;
                right: 0;
                top: calc((100% - 120px) / 2);
            }
            /*.scroll{
                display: inline-block;
                width: 16px;
                height: 100px;
                background-color: rgba(0,0,0,0.8);
                opacity: 0.4;
                border-radius: 8px;
                position: absolute;
                right: 0;
            }*/
            .up,.down{
                display: inline-block;
                width: 100px;
                height: 40px;
                color: white;
                background-color: black;
                text-align:center;
                line-height: 40px;
                border-bottom-left-radius: 30px;;
                border-top-left-radius: 30px;
                position: fixed;
                right: 0;
                cursor: pointer;
                opacity: 0;
            }
            .up{
                top: calc((100% - 120px) / 2);
                background-color: #d03f42;
            }
            .down{
                top: calc(50% + 20px);
                background-color: #383838;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="up fan">返回顶部</span>
            <span class="down fan">返回底部</span>
            <img src="img/scroll.png" alt="">
            <!--<span class="scroll"></span>-->
        </div>
    </body>
</html>
<script>
    // 显示/隐藏
    $('.fan').hover(function(){
        $(this).stop().animate({
            opacity: 1,
        },300)
    },function(){
        $(this).stop().animate({
            opacity: 0,
        },300)
    })
    
  
    $('.up').click(function(){
        $(document).scrollTop(0)
    })
    $('.down').click(function(){
        
        $(document).scrollTop($(window).height());
    })
</script>